<div class="tabset--nav-container">
    <ul id="iframetab" class="nav tabs-container--horizontal" [ngClass]="classMap" (click)="$event.preventDefault()">
        <li
            *ngFor="let tabz of tabs; let i = index"
            id="{{ 'tabKey' + i }}"
            class="nav-item tabset--nav-item"
            [ngClass]="{
                borderactive: tabz.active == true,
                bordernotactive: tabz.active == false,
                active: tabz.active == true,
                'nav-item--apps': tabz.heading === '我的应用',
                'nav-item--home': tabz.heading === '首页'
            }"
            [class.active]="tabz.active"
            [class.disabled]="tabz.disabled"
            title="{{ tabz.heading }}"
            (mouseenter)="onchangeimg(tabz)"
            (mouseleave)="overchangeimg(tabz)"
            [class.d-none]="!tabz.visible"
        >
            <a
                href="javascript:void(0);"
                class="nav-link tabset--nav-link"
                [ngClass]="{ notactive: tabz.active == false, inavtive: tabz.active == true }"
                [attr.id]="tabz.id ? tabz.id + '-link' : ''"
                [class.active]="tabz.active"
                [class.disabled]="tabz.disabled"
                (click)="tabSwitch(tabz); tabz.active = true"
            >
                <!--[首页]标签-->
                <span *ngIf="tabz.heading === '首页'" [ngTransclude]="tabz.headingRef" class="nav-item--home-icon"></span>
                <!--[我的应用]标签-->
                <span *ngIf="tabz.heading === '我的应用'" [ngTransclude]="tabz.headingRef"></span>
                <!--[普通]标签-->
                <span
                    *ngIf="tabz.heading !== '我的应用' && tabz.heading !== '首页'"
                    [ngTransclude]="tabz.headingRef"
                    class="tabset--nav-link-text"
                    >{{ tabz.heading }}</span
                >

                <div
                    *ngIf="tabz?.active === true && tabz.heading !== '我的应用' && tabz.heading !== '首页'"
                    class="tabset--nav-link-overlay-active"
                ></div>
                <div
                    *ngIf="tabz?.active === false && tabz.heading !== '我的应用' && tabz.heading !== '首页'"
                    class="tabset--nav-link-overlay"
                ></div>
                <div class="nav-link-close" (click)="closeApp($event, tabz)">
                    <span class="f-icon f-icon-close"></span>
                </div>
            </a>
        </li>
    </ul>
    <div class="tabset-container--dropdown" [class.active]="showAllNav" (click)="showAllNavChange($event)" *ngIf="showAllNavBtn">
        <span class="f-icon f-icon-arrow-seek-down"></span>
    </div>
    <div class="tabset-container--vertical" [class.show]="showAllNav">
        <ul class="list-group">
            <li class="list-group-header">
                <h3 class="list-group-header--title">全部页签</h3>
                <div class="list-group-header--close-wrapper">
                    <span class="header--close-icon"><i class="f-icon"></i></span>
                    <span class="header--close-text" (click)="closeAllAppTabs($event)">全部关闭</span>
                </div>
            </li>
            <li
                *ngFor="let tabz of tabs; let i = index"
                [attr.id]="tabz.id ? tabz.id + '-link' : ''"
                class="list-group-item"
                [class.active]="tabz.active"
                [class.disabled]="tabz.disabled"
                title="{{ tabz.heading }}"
                (mouseenter)="onchangeimg(tabz)"
                (mouseleave)="overchangeimg(tabz)"
                [ngClass]="{
                    'nav-item--apps': tabz.heading === '我的应用',
                    'nav-item--home': tabz.heading === '首页',
                    active: tabz.active,
                    disabled: tabz.disabled
                }"
                (click)="changekeyApplication($event, i, tabz)"
            >
                <span *ngIf="tabz.heading === '首页'" [ngTransclude]="tabz.headingRef">
                    <i class="f-icon f-icon-index"></i> {{ tabz.heading }}
                </span>
                <span
                    *ngIf="tabz.heading !== '我的应用' && tabz.heading !== '首页' && tabz.heading !== 'Hidden'"
                    [ngTransclude]="tabz.headingRef"
                    class="spanlib"
                    >{{ tabz.heading }}
                </span>
                <span *ngIf="tabz.heading === 'Hidden'" [ngTransclude]="tabz.headingRef" class="spanlib" style="display: none"
                    >{{ tabz.heading }}
                </span>
                <span
                    [ngClass]="{
                        notinimg: tabz.active !== true || tabz.removable !== true,
                        noimghover: tabz.disabled == false && tabz.heading !== '首页' && tabz.heading !== '我的应用'
                    }"
                    class="nav-link-close f-icon"
                    (click)="closeApp($event, tabz)"
                >
                </span>
            </li>
        </ul>
    </div>
    <div
        class="gw-header--menu-panel-mask"
        [ngClass]="{ 'f-state-show': showAllNav, 'f-state-hidden': !showAllNav }"
        #menuPanelMask
        (click)="closeAllnavPanel($event)"
    ></div>
</div>
<!-- <div class="tab-content tabset--tab-content">
    <ng-content></ng-content>
</div> -->
